<template>
  <div id="home">
    <div class="home">
      <div class="home-head">
        <swiper>
          <swiper-item v-for="(item, id) in banners" :key="id">
            <img :src="item" alt="" />
          </swiper-item>
        </swiper>
      </div>
      <div class="home-text">Welcome Minecraft</div>
      <div class="home-head-down">
        <img src="@/assets/img/home/down.jpg" alt="" />
      </div>
    </div>
    <div class="home-content">
      <div class="content-left">
        <div class="left-list">
          <div
            class="left-list-item"
            v-for="(item, index) in articles"
            :key="index"
            @click="open(item.link)"
          >
            <div class="item-content">
              <div class="content-title">{{ item.title }}</div>
              <div class="content-info">
                <span class="author"
                  ><span class="el-icon-user-solid"></span
                  >{{ item.author }}</span
                >
                <span class="date"
                  ><span class="el-icon-date"></span>{{ item.date }}</span
                >
                <span class="label"
                  ><span class="el-icon-discount"></span>{{ item.tag }}</span
                >
              </div>
            </div>
            <div class="item-float">
              <img :src="item.float" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="right-info">
          <div class="right-info-head">
            <div class="info-head-pic">
              <img src="@/assets/img/home/head.png" alt="" />
            </div>
            <div class="info-head-author">粒芒🍁</div>
            <div class="info-head-content">
              <div class="head-article">
                11<br />
                Article
              </div>
              <div>|</div>
              <div class="head-tag">
                7<br />
                Tag
              </div>
            </div>
          </div>
          <div class="right-info-category">
            <div class="category-head">
              <span class="el-icon-notebook-1"></span>
              <span>Category</span>
            </div>
            <div class="category-list">
              <div class="category-item">
                <div class="item-title">前端基础</div>
                <div class="item-count">3</div>
              </div>
              <div class="category-item">
                <div class="item-title">vue</div>
                <div class="item-count">11</div>
              </div>
              <div class="category-item">
                <div class="item-title">node.js</div>
                <div class="item-count">21</div>
              </div>
            </div>
          </div>
          <div class="right-info-tag">
            <div class="tag-head">
              <span class="el-icon-collection-tag"></span><span>Tag</span>
            </div>
            <div class="tag-list">
              <div class="tag-item" v-for="item in tags" :key="item">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="right-info-link">
            <div class="tag-head">
              <span class="el-icon-link"></span><span>freind link</span>
            </div>
            <div class="link-list">
              <div class="link-item" v-for="item in links" :key="item">
                <span class="el-icon-cpu"></span> {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperItem } from "@/components/common/swiper";
export default {
  name: "Home",
  created() {
    this.banners = [
      "./img/home/banner1.jpg",
      "./img/home/banner2.jpg",
      "./img/home/banner3.jpg",
      "./img/home/banner4.jpg",
    ];
  },
  data() {
    return {
      banners: [],
      tags: ["vue3.0", "html5", "css3", "node.js", "socket", "debug", "vuex"],
      links: ["useless-mall", "data-view", "cloud-music", "CSDN", "学习笔记"],
      articles: [
        {
          title: "关于iframe在vue中应用的问题",
          link:
            "https://blog.csdn.net/weixin_44219854/article/details/114868568",
          date: "2021-03-16",
          author: "粒芒🍁",
          tag: "vue html",
          float: "./img/home/pic12" + Math.round(Math.random() * 10) + ".png",
        },
        {
          title: "关于http://localhost:8080./无法访问的问题",
          link:
            "https://blog.csdn.net/weixin_44219854/article/details/113753178",
          date: "2021-03-27",
          author: "粒芒🍁",
          tag: "vue html",
          float: "./img/home/pic12" + Math.round(Math.random() * 10) + ".png",
        },
        {
          title: "关于vue3中使用highlight的bug",
          link:
            "https://blog.csdn.net/weixin_44219854/article/details/113735113",
          date: "2021-03-27",
          author: "粒芒🍁",
          tag: "vue html",
          float: "./img/home/pic12" + Math.round(Math.random() * 10) + ".png",
        },
      ],
    };
  },
  methods: {
    open(url) {
      window.open(url);
    },
  },
  components: {
    Swiper,
    SwiperItem,
  },
};
</script>

<style scoped>
#home {
}
.home {
  margin: 10px 20px;
  position: relative;
}
.home-head {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
}
.home-head img {
  height: 520px;
  width: 100%;
}
.home-head::after {
  text-align: center;
  color: #fff;
  border-radius: 20px;
  content: "欢迎来到，我的世界";
  font-weight: 1000;
  font-size: 100px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 520px;
  line-height: 520px;
  background-color: rgba(0, 0, 0, 0);
}
.home-text {
  width: 100%;
  position: absolute;
  top: 65%;
  text-align: center;
  color: #fff;
  font-size: 60px;
  font-weight: 500;
}
.home-head-down {
  width: 57px;
  height: 33px;
  position: absolute;
  top: 85%;
  left: calc(50% - 28px);
  animation: 2s down infinite;
}
@keyframes down {
  0% {
    top: 85%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 85%;
  }
}
.home-content {
  height: 1000px;
  display: flex;
  margin: 10px 20px 0 20px;
  padding: 0 20px;
}
.content-left {
  width: 60%;
}
.left-list-item {
  height: 60px;
  padding: 16px 20px;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
  transition: 0.6s;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
}
.left-list-item:hover {
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
}
.item-float {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  right: 0;
  animation: 2s float infinite;
}
@keyframes float {
  0% {
    top: 0;
  }
  50% {
    top: 20px;
  }
  100% {
    top: 0;
  }
}

.item-float img {
  width: 100%;
}
.item-content {
}
.item-content .content-title {
  font-size: 20px;
  font-weight: 500;
  padding: 6px 20px;
  transition: 1s;
}
.item-content .content-title:hover {
  color: #92c8fd;
}
.item-content .content-info {
  color: #7f7f7f;
  margin: 10px 0;
}
.item-content .content-info span {
  margin: 0 10px;
}
.item-content .content-info .label:hover {
  color: #92c8fd;
  transition: 1s;
}
.content-right {
  width: 40%;
  padding: 0 20px;
}

.right-info {
  margin: 20px;
  padding: 20px 0;
  border-radius: 10px;
  background: url("../assets/img/home/notice.png") no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 2px 20px 10px rgba(0, 0, 0, 0.2);
}
.info-head-pic {
  margin: 10px auto;
  overflow: hidden;

  width: 100px;
  height: 100px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
}
.info-head-pic img {
  width: 100%;
}
.info-head-author {
  font-size: 30px;
  font-weight: 800;
  text-align: center;
}
.info-head-content {
  margin: 10px;
  padding: 10px;
  border-bottom: 4px solid rgba(0, 0, 0, 0.2);
  display: flex;
}
.info-head-content div {
  font-size: 40px;
  font-weight: 800;
}
.info-head-content .head-article {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  width: 50%;
}
.info-head-content .head-tag {
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  width: 50%;
}
.right-info-category {
  padding: 10px;
  font-weight: 600;
}
.category-head {
  padding: 10px;
  font-size: 25px;
  font-weight: 700;
}
.category-head span {
  margin: 0 5px;
}
.category-list {
  padding: 10px 20px;
}
.category-item {
  padding: 10px;
  margin: 5px;
  display: flex;
  box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.2);
  transition: 1s;
}
.category-item:hover {
  box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.2);
  transform: scale(1.2);
}
.category-item .item-title {
  flex: 1;
}
.category-item .item-count {
  width: 40px;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.2);
}
.right-info-tag {
  padding: 10px;
}
.tag-head {
  font-size: 25px;
  padding: 10px;
  font-weight: 700;
}
.tag-head span {
  margin: 0 5px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
}
.tag-item:nth-child(3n) {
  background-color: rgb(103, 204, 134);
}
.tag-item:nth-child(3n + 1) {
  background-color: rgb(244, 126, 96);
}
.tag-item:nth-child(3n + 2) {
  background-color: rgb(225, 91, 100);
}
.tag-item {
  box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.2);
  transition: 1s;
  border-radius: 5px;
  margin: 5px;
  padding: 3px 5px;
  color: #fff;
  font-weight: 600;
}
.tag-item:hover {
  transform: scale(1.2);
}
.right-info-link {
  padding: 10px;
}
.link-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.link-item {
  color: #fff;
  background: url("../assets/img/home/block.png") no-repeat;
  background-size: 100% 100%;
  border-radius: 5px;
  padding: 3px 5px;
  margin: 5px;

  font-weight: 600;
}
.link-item:active {
  box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}
</style>
